import React, {Component} from 'react';
import {
	AppRegistry,
	Platform,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity,
	ScrollView,
	SectionList,
} from 'react-native';

var Common = require('./common');
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
export default class MainPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			sections: [],
			imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514356844477&di=7c57fde0860194258cbec5c2720e0cf5&imgtype=0&src=http%3A%2F%2Fwww.swkweike.com%2Fdata%2Fuploads%2F2015%2F05%2F26%2F20430804665564348adc669.png',
		};
	}

	// 此处设置 Tab 的名称和一些样式，这里的会覆盖掉配置路由文件的样式，下面会讲
	static navigationOptions = {
		headerTitle: '首页',
		tabBarLabel: '首页',
		tabBarIcon: ({focused}) => {
			if (focused) {
				return (
					<Image style={{height: 30, width: 30}}
					       source={require('./images/cheyuan1.png')}/>
				);
			}
			return (
				<Image style={{height: 30, width: 30}}
				       source={require('./images/cheyuan.png')}/>
			);
		},
	};

	getData() {
		var _this = this;
		Common.ajaxPost(Common.url + 'brand.php?action=brandlist&section=letter', function (res) {

			if (res.code == 1) {
				var data = res.data;
				var sections = [];
				for (var obj in data) {
					var json = {};
					json.letter = obj;
					json.data = data[obj];
					sections.push(json);
				}
				console.log(sections)
				this.setState({
					sections: sections
				})
			}
		}.bind(this), {verify: '08login', t: ''});
	}

	//左侧列表
	_renderItem = (info) => {
		var txt = info.item.title;
		var _this = this;
		var imgsrc = Common.url + info.item.logo;
		var ccid = info.item.ccid;
		return (
			<TouchableOpacity style={styles.brand} key={info.item.id} onPress={_this.toBrand.bind(_this, ccid)}>
				<Image style={styles.brandImg} source={{uri: imgsrc}}/>
				<Text style={styles.brandName}>{txt}</Text>
				<Image style={{width: 22, height: 22, marginRight: 30}} source={require('./images/jiantou.png')}/>
			</TouchableOpacity>
		)
	}
	//左侧A-Z
	_sectionComp = (info) => {
		var txt = info.section.letter;
		return (<Text style={styles.topTitle}>{txt}</Text>)
	}

	toBrand(str) {
		this.props.navigation.navigate('Brand', str)
	}

	toSearch() {
		this.props.navigation.navigate('Search')
	}

	componentWillMount() {
		this.getData();
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<View style={styles.container}>
				<View style={styles.logo}>
					<View style={{width: 80}}>
						<Text style={{textAlign: 'center', color: '#fff'}}>LOGO</Text>
					</View>
					<TouchableOpacity style={styles.fakeInput} activeOpacity={1} onPress={this.toSearch.bind(this)}>
						<Image style={{width: 15, height: 15, marginRight: 10, marginLeft: 10}}
						       source={require('./images/sousuo.png')}/>
						<Text style={{color: '#fff'}}>奥迪</Text>
					</TouchableOpacity>
					<View style={{width: 80}}></View>
				</View>
				<Image style={styles.banner} source={require('./images/banner.png')}/>
				<SectionList
					renderSectionHeader={this._sectionComp}
					renderItem={this._renderItem}
					sections={this.state.sections}
					keyExtractor={(item, index) => item + index}
				/>

			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	banner: {
		width: Common.screenWidth,
		height: 150,
	},
	logo: {
		position: 'absolute',
		left: 0,
		top: 0,
		zIndex: 99,
		width: Common.screenWidth,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		paddingTop: 10,
	},
	fakeInput: {
		flex: 1,
		height: 25,
		backgroundColor: '#66c4fb',
		borderRadius: 12,
		flexDirection: 'row',
		alignItems: 'center',
	},
	topTitle: {
		height: 30,
		textAlignVertical: 'center',
		lineHeight: 30,
		backgroundColor: '#f6f6f6',
		color: '#333',
		fontSize: 16,
		paddingLeft: 15,
	},
	brand: {
		flexDirection: 'row',
		backgroundColor: "#fff",
		height: 60,
		alignItems: 'center',
		paddingLeft: 15,
		borderBottomColor: 'rgba(244,245,248,1)',
		borderBottomWidth: 1
	},
	brandImg: {
		width: 50,
		height: 50,
	},
	brandName: {
		width: Common.screenWidth - 132,
		height: 60,
		lineHeight: 60,
		textAlignVertical: 'center',
		color: '#5C5C5C',
		fontSize: 16,
		borderBottomWidth: 1,
		borderBottomColor: '#eee',
		marginLeft: 15
	},
});
